<template>
  <Card size="small" title="客户" class="cursor-pointer" @click="go('/customer/list')">
    <template #extra>
      <Icon icon="ant-design:team-outlined" :size="24" color="purple" />
    </template>
    <Skeleton v-if="loading" :active="loading" />
    <Row v-else class="py-4 px-4">
      <Col span="12">
      <div class="ant-statistic ">
        <div class="ant-statistic-title mb-1 ">
          客户
        </div>
        <div class="ant-statistic-content">
          <CountTo :endVal="customerTotal" class="ant-statistic-content-value-int text-2xl" />
        </div>
      </div>
      </Col>
      <Col span="12">
      <div class="ant-statistic">
        <div class="ant-statistic-title mb-1">
          客户用户
        </div>
        <div class="ant-statistic-content">
          <CountTo :endVal="customerUserTotal" class="ant-statistic-content-value-int text-2xl" />
        </div>
      </div>
      </Col>
    </Row>
    <!-- <div class="p-2 px-4 flex justify-between">
      <span>&nbsp;</span>
      <span>点击查看客户</span>
    </div> -->
  </Card>
</template>

<script lang="ts" setup>

import { Card, Row, Col, Skeleton } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { CountTo } from '/@/components/CountTo/index';
import { useGo } from '/@/hooks/web/usePage';
import { useWebsocketStore } from '/@/store/modules/websocket';
import { onMounted, onUnmounted, ref } from 'vue';
import { EntityType } from '/@/enums/entityTypeEnum';
import { Authority } from '/@/enums/authorityEnum';

const go = useGo();

const CUSTOMER_COUNT_CMD_ID = ref(0);
const CUSTOMER_USER_COUNT_CMD_ID = ref(0);

const customerTotal = ref(0);
const customerUserTotal = ref(0);

const loading = ref(false);

const { getAndIncrementCmdId, send, unsubscribe } = useWebsocketStore();

onMounted(() => {
  loading.value = true;
  CUSTOMER_COUNT_CMD_ID.value = getAndIncrementCmdId();
  CUSTOMER_USER_COUNT_CMD_ID.value = getAndIncrementCmdId();
  send(
    [CUSTOMER_COUNT_CMD_ID.value, CUSTOMER_USER_COUNT_CMD_ID.value],
    {
      entityCountCmds: [
        {
          cmdId: CUSTOMER_COUNT_CMD_ID.value,
          query: { entityFilter: { type: "entityType", entityType: EntityType.CUSTOMER, resolveMultiple: true, } }
        },
        {
          cmdId: CUSTOMER_USER_COUNT_CMD_ID.value,
          query: {
            entityFilter: { type: "entityType", entityType: EntityType.USER, resolveMultiple: true },
            keyFilters: [{
              valueType: "STRING",
              key: { key: "authority", type: "ENTITY_FIELD" },
              predicate: { operation: "EQUAL", type: "STRING", value: { defaultValue: Authority.CUSTOMER_USER, dynamicValue: null } }
            }]
          }
        }
      ]
    },
    onMessage,
  )
})

function onMessage(data: any) {
  loading.value = false;
  if (CUSTOMER_COUNT_CMD_ID.value == data.cmdId) {
    customerTotal.value = data.count;
  } else if (CUSTOMER_USER_COUNT_CMD_ID.value == data.cmdId) {
    customerUserTotal.value = data.count;
  }
}
onUnmounted(() => {
  if (CUSTOMER_COUNT_CMD_ID.value > 0) {
    unsubscribe(
      [CUSTOMER_COUNT_CMD_ID.value, CUSTOMER_USER_COUNT_CMD_ID.value],
      {
        entityCountUnsubscribeCmds: [
          { cmdId: CUSTOMER_COUNT_CMD_ID.value },
          { cmdId: CUSTOMER_USER_COUNT_CMD_ID.value }
        ]
      }
    )
  }

})


</script>